<template>
  <ContentWrap>
    <div class="btnWrap routeHeader">
    <div>
      <el-button @click="close">关闭</el-button>
    </div>
  </div>
  </ContentWrap>
  
  <ContentWrap>
    <el-table v-loading="loading" :data="list" border :height="tableHeight">
    <el-table-column type="index" width="55" label="序号" align="left" fixed="left"/>
    <!-- 列定义 -->
    <el-table-column label="任务单号" align="left" width="180" :class="'custom-header'">
      <template #default="scope">
        {{ scope.row.taskNumber }}
      </template>
    </el-table-column>
    <el-table-column label="订单号" align="left" width="180">
      <template #default="scope">
        {{ scope.row.orderNumber }}
      </template>
    </el-table-column>
    <el-table-column label="客户名称" align="left" width="180" :class="'custom-header'">
      <template #default="scope">
        {{ scope.row.customerName }}
      </template>
    </el-table-column>
    <el-table-column label="订单类型" align="left" width="180" :class="'custom-header'">
      <template #default="scope">
        <dict-tag :type="DICT_TYPE.MARKET_ORDER_TYPE" :value="scope.row.dictOrderType" />
      </template>
    </el-table-column>
    <el-table-column label="产品编号" align="left" width="180" :class="'custom-header'">
      <template #default="scope">
        {{ scope.row.productNumber }}
      </template>
    </el-table-column>
    <el-table-column label="产品名称" align="left" width="180" :class="'custom-header'">
      <template #default="scope">
        {{ scope.row.productName }}
      </template>
    </el-table-column>
    <el-table-column label="产品规格" align="left" width="180" :class="'custom-header'">
      <template #default="scope">
        {{ scope.row.productStandard }}
      </template>
    </el-table-column>
    <el-table-column label="单位" align="left" width="180" :class="'custom-header'">
      <template #default="scope">
        {{scope.row.partUnit}}
        <!-- <dict-tag :type="DICT_TYPE.ORDER_PRODUCT_UNIT" :value="scope.row.dictUnit" /> -->
      </template>
    </el-table-column>
    <el-table-column label="订单数量" align="left" width="180" :class="'custom-header'">
      <template #default="scope">
        {{ scope.row.orderQuantity }}
      </template>
    </el-table-column>
    <el-table-column label="订单日期" align="left" width="180" :class="'custom-header'">
      <template #default="scope">
        {{ scope.row.orderDate }}
      </template>
    </el-table-column>
    <el-table-column label="发货日期" align="left" width="180" :class="'custom-header'">
      <template #default="scope">
        {{ scope.row.deliveryDate }}
      </template>
    </el-table-column>
    <el-table-column label="任务类型" align="left" width="180" :class="'custom-header'">
      <template #default="scope">
        <dict-tag :type="DICT_TYPE.ORDER_TECHNOL_TASK_TYPE" :value="scope.row.dictTaskType" />
      </template>
    </el-table-column>
    <el-table-column label="变更类型" align="left" width="180" :class="'custom-header'">
      <template #default="scope">
        <dict-tag :type="DICT_TYPE.CHANGE_TYPE" :value="scope.row.dictChangeType" />
      </template>
    </el-table-column>
    <el-table-column label="版本号" align="left" width="180" :class="'custom-header'">
      <template #default="scope">
        {{ scope.row.version }}
      </template>
    </el-table-column>
    <el-table-column label="项目合同" align="left" width="180" :class="'custom-header'">
      <template #default="scope">
        <span style="cursor: pointer" @click="previewFile(scope.$index)">{{
          scope.row.fileName
        }}</span>
      </template>
    </el-table-column>
    <el-table-column label="备注" align="left" width="180" :class="'remark'">
      <template #default="scope">
        {{ scope.row.remark }}
      </template>
    </el-table-column>
    <el-table-column label="状态" align="left" width="180" :class="'custom-header'">
      <template #default="scope">
        <dict-tag :type="DICT_TYPE.ORDER_TECHNOL_TASK_STATUS" :value="scope.row.dictTaskStatus" />
      </template>
    </el-table-column>
    <el-table-column label="创建人" align="left" width="180" :class="'custom-header'">
      <template #default="scope">
        {{ scope.row.creatorName }}
      </template>
    </el-table-column>
    <el-table-column label="创建时间" align="left" width="180" :class="'custom-header'">
      <template #default="scope">
        {{ timestampToDateTime(scope.row.createTime) }}
      </template>
    </el-table-column>
  </el-table>
  </ContentWrap>
  
</template>

<script lang="ts" setup>
  import { useRoute } from 'vue-router'
  import { DICT_TYPE } from '@/utils/dict'
  import * as TechnolReviewTaskApi from '@/api/orderManagement/technolReviewTask'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  const route = useRoute()
  const { push } = useRouter()
  const tagsViewStore = useTagsViewStore()
  const routes = useRouter() // 路由
  const loading = ref(true)
  const list = ref<any>([])
  //时间戳转换
  const timestampToDateTime = (timestamp) => {
    const date = new Date(timestamp)
    const year = date.getFullYear()
    const month = ('0' + (date.getMonth() + 1)).slice(-2)
    const day = ('0' + date.getDate()).slice(-2)
    const hours = ('0' + date.getHours()).slice(-2)
    const minutes = ('0' + date.getMinutes()).slice(-2)
    const seconds = ('0' + date.getSeconds()).slice(-2)
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  }
  const getList = async () => {
    loading.value = true
    try {
      // 请求数据的逻辑
    } finally {
      loading.value = false
    }
  }
  //附件预览
  const previewFile = (index) => {
    list.value[index]
    window.open(list.value[index].filePath)
  }
  /**关闭 */
  const close = async () => {
    tagsViewStore.delView(routes.currentRoute.value)
    push('/orderManagement/orderManagement/review/review')
  }
  //获取订单信息
  const getDetail = async (id) => {
    const data = await TechnolReviewTaskApi.getTechnolReviewTask(id)
    list.value.push(data)
  }
  // 初始化
  const tableHeight = ref(0)
  onMounted(async () => {
    tableHeight.value = document.body.clientHeight - 132  - 100
    if (route.query.id != 'undefined') {
      getDetail(route.query.id)
    }
    await getList()
  })
</script>
<style lang="scss" scoped>
  .contentView {
    padding: 10px;
    background: #fff;
  }
  .tableView {
    :deep(.el-input__wrapper) {
      box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
      cursor: default;
      .el-input__inner {
        cursor: default !important;
        text-align: center;
      }
    }
  }
  .btnWrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .el-table__header-wrapper {
    background: red;
  }
</style>
